<!-- 区域管理 -->
<template>
  <div class="domain-index">
    <div class="domain-sear" v-if="isShowSear">
      <el-form size="mini" inline>
        <el-form-item label="关键字">
          <el-input
            placeholder="关键字检索(名称/授权标识)"
            v-model="searParams.keyword"
          ></el-input>
        </el-form-item>
        <el-form-item label="创建人">
          <el-select
            v-model="searParams.createBy"
            size="mini"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in createTenantList"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="createDate"
            style="width: 300px"
            size="mini"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="center"
            @change="handleSelectDate"
          >
          </el-date-picker>
        </el-form-item>
        <el-button size="mini" type="primary" @click="handleSear"
          >查询</el-button
        >
        <el-button size="mini" @click="handleResetSearParams()">重置</el-button>
      </el-form>
    </div>
    <div class="domain-oper">
      <div class="domain-oper-left">
        <el-button
          type="primary"
          size="mini"
          plain
          icon="el-icon-plus"
          @click="handleAddSingle"
          >新增</el-button
        >
        <el-button
          type="success"
          size="mini"
          plain
          icon="el-icon-edit"
          @click="handleEditBatch"
          >修改</el-button
        >
        <el-button
          type="danger"
          size="mini"
          plain
          icon="el-icon-delete"
          @click="handleRemoveBatch"
        >
          删除</el-button
        >
        <el-button size="mini" plain icon="el-icon-sort" @click="handleExband"
          >展开/折叠</el-button
        >
      </div>
      <div class="domain-oper-right">
        <el-button
          icon="el-icon-search"
          size="mini"
          circle
          @click="isShowSear = !isShowSear"
        ></el-button>
        <el-button
          icon="el-icon-refresh"
          size="mini"
          circle
          @click="list()"
        ></el-button>
      </div>
    </div>
    <div class="role-list">
      <el-table
        stripe
        highlight-current-row
        v-if="isRefreshTable"
        :data="domainPage"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        :default-expand-all="isExpand"
        tooltip-effect="dark"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        @selection-change="handleSelectionModify"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="name" label="区域名称"> </el-table-column>
        <el-table-column prop="level" label="是否启用" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.enable"
              :active-value="1"
              :inactive-value="0"
              active-text="启用"
              inactive-text="禁用"
              @change="handleModifyEnable(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              @click="handleAddSingle(scope.row)"
              type="text"
              size="small"
              >新增</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleEditSingle(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleRemoveSingle(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <add-comp
      :enables="enableList"
      :parents="domainPage"
      :currentPanrent="currentPanrent"
      @close="handleCloseAdd"
      @submit="handleSubimitAdd"
      v-if="isShowAdd"
    />
    <edit-comp
      :enables="enableList"
      :parents="domainPage"
      :data="singleData"
      @close="handleCloseEdit"
      @submit="handleSubimitEdit"
      v-if="isShowEdit"
    />
  </div>
</template>

<script>
import { isNotEmpty, isEmpty, isNotNull, isNull } from "@/utils/validate";
import AddComp from "./addComp.vue";
import EditComp from "./editComp.vue";
export default {
  name: "",
  data() {
    return {
      isShowSear: true,
      isRefreshTable: true,
      isExpand: false,
      isShowAdd: false,
      isShowEdit: false,
      createDate: "",
      searParams: {},
      domainPage: [],
      createTenantList: [],
      selectItems: [],
      selectIds: [],
      enableList: [],
      currentPanrent: {},
      singleData: {},
    };
  },
  created() {
    this.resetSearParams();
    this.list();
  },
  components: {
    AddComp,
    EditComp,
  },
  mounted() {},
  methods: {
    /**
     * 重置检索菜单
     */
    resetSearParams() {
      this.searParams = {
        keyword: "",
      };
    },
    /**
     * 重置搜索参数
     */
    handleResetSearParams() {
      this.resetSearParams();
    },
    /**
     * 查询域列表
     */
    list() {
      this.$store.dispatch("domain/list", this.searParams).then((res) => {
        if (res.code === 0) {
          this.domainPage = res.data;
        }
      });
    },
    /**
     * 执行搜索
     */
    handleSear() {
      this.list();
    },
    /**
     * 展开/折叠
     */
    handleExband() {
      this.isRefreshTable = false;
      this.isExpand = !this.isExpand;
      this.$nextTick(() => {
        this.isRefreshTable = true;
      });
    },
    /**
     * 选中时间
     */
    handleSelectDate(val) {
      this.searParams.fromTime = val[0];
      this.searParams.toTime = val[1];
    },
    /**
     * 选中状态改变
     */
    handleSelectionModify(domainItem) {
      this.selectItems = [];
      this.selectIds = [];
      for (let i = 0; i < domainItem.length; i++) {
        this.selectItems.push(domainItem[i]);
        this.selectIds.push(domainItem[i].id);
      }
    },
    /**
     * 单删
     */
    handleRemoveSingle(domainItem) {
      this.doRemove([domainItem.id]);
    },
    /**
     * 批删
     */
    handleRemoveBatch() {
      this.doRemove(this.selectIds);
    },
    /**
     * 执行删除请求
     */
    doRemove(domainIds) {
      if (isEmpty(domainIds)) {
        this.$message("未选中区域");
        return;
      }
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("domain/removeByIds", domainIds).then((res) => {
            if (res.code === 0) {
              this.list();
              this.$message({
                message: "删除区域成功",
                type: "success",
              });
            } else {
              this.$message.error("删除区域失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /**
     * 查询启用状态
     */
    getEnable() {
      this.$store.dispatch("domain/getEnable").then((res) => {
        if (res.code === 0) {
          this.enableList = res.data;
        }
      });
    },
    /**
     * 关闭修改对话框
     */
    handleCloseEdit() {
      this.isShowEdit = false;
    },
    /**
     * 预修改,单修改按钮
     */
    handleEditSingle(domainForm) {
      this.currentPanrent = domainForm;
      this.doPreEdit([domainForm]);
    },
    /**
     * 预修改,多修改按钮
     */
    handleEditBatch() {
      this.doPreEdit(this.selectItems);
    },
    /**
     * 预修改
     */
    doPreEdit(domainForms) {
      if (domainForms == null || domainForms.length != 1) {
        this.$message({
          message: "请选择一个区域",
          type: "warning",
        });
        return;
      }
      const domainForm = domainForms[0];
      this.$store.dispatch("domain/getById", domainForm.id).then((res) => {
        if (res.code === 0) {
          this.getEnable();
          this.singleData = res.data;
          this.isShowEdit = true;
        } else {
          this.$message.error("同步区域数据失败");
        }
      });
    },
    /**
     * 提交修改
     */
    handleSubimitEdit(domainForm) {
      this.$store.dispatch("domain/modifyById",domainForm).then((res) => {
        if (res.code === 0) {
          this.isShowEdit = false;
          this.list();
          this.$message({
            message: "修改区域成功",
            type: "success",
          });
        } else {
          this.$message.error("修改区域失败");
        }
      });
    },
    /**
     * 预创建
     */
    handleAddSingle(domainForm) {
      if (isNotNull(domainForm)) {
        this.currentPanrent = domainForm;
      }
      this.getEnable();
      this.isShowAdd = true;
    },
    /**
     * 关闭创建对话框
     */
    handleCloseAdd() {
      this.isShowAdd = false;
    },
    /**
     * 提交创建
     */
    handleSubimitAdd(domianForm) {
      this.$store.dispatch("domain/create", domianForm).then((res) => {
        if (res.code === 0) {
          this.isShowAdd = false;
          this.list();
          this.$message({
            message: "创建区域成功",
            type: "success",
          });
        } else {
          this.$message.error("创建区域失败");
        }
      });
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.domain-index {
  height: auto;
  margin: 1%;
  display: flex;
  flex-direction: column;
}

.domain-oper {
  margin: 12px 0 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>